<div *ngIf="contentData">
  <ng-container *ngTemplateOutlet="logFiltersTpl"></ng-container>

  <ul ngbNav
      #nav="ngbNav"
      class="nav-tabs"
      cdStatefulTab="logs">
    <li ngbNavItem="cluster-logs">
      <a ngbNavLink
         i18n>Cluster Logs</a>
      <ng-template ngbNavContent>
        <div class="card bg-light mb-3"
             *ngIf="clog">
          <div class="card-body">
            <p *ngFor="let line of clog">
              <span class="timestamp">{{ line.stamp | cdDate }}</span>
              <span class="priority {{ line.priority | logPriority }}">{{ line.priority }}</span>
              <span class="message">{{ line.message }}</span>
            </p>

            <span *ngIf="contentData.clog.length === 0"
                  i18n>No entries found</span>
          </div>
        </div>
      </ng-template>
    </li>
    <li ngbNavItem="audit-logs">
      <a ngbNavLink
         i18n>Audit Logs</a>
      <ng-template ngbNavContent>
        <div class="card bg-light mb-3"
             *ngIf="audit_log">
          <div class="card-body">
            <p *ngFor="let line of audit_log">
              <span class="timestamp">{{ line.stamp | cdDate }}</span>
              <span class="priority {{ line.priority | logPriority }}">{{ line.priority }}</span>
              <span class="message">{{ line.message }}</span>
            </p>

            <span *ngIf="contentData.audit_log.length === 0"
                  i18n>No entries found</span>
          </div>
        </div>
      </ng-template>
    </li>
  </ul>

  <div [ngbNavOutlet]="nav"></div>
</div>

<ng-template #logFiltersTpl>
  <div class="form-inline">
    <div class="form-group">
      <label class="col-form-label"
             i18n>Priority:</label>
      <select class="form-control custom-select"
              [(ngModel)]="priority"
              (ngModelChange)="filterLogs()">
        <option *ngFor="let prio of prioritys"
                [value]="prio.value">{{ prio.name }}</option>
      </select>
    </div>

    <div class="form-group">
      <label class="col-form-label"
             i18n>Keyword:</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text">
            <i [ngClass]="[icons.search]"></i>
          </span>
        </div>

        <input class="form-control"
               type="text"
               [(ngModel)]="search"
               (keyup)="filterLogs()">

        <div class="input-group-append">
          <button type="button"
                  class="btn btn-light"
                  (click)="clearSearchKey()">
            <i class="icon-prepend {{ icons.destroy }}"></i>
          </button>
        </div>
      </div>
    </div>

    <div class="form-group">
      <label class="col-form-label"
             i18n>Date:</label>
      <div class="input-group">
        <input class="form-control"
               placeholder="YYYY-MM-DD"
               ngbDatepicker
               #d="ngbDatepicker"
               (click)="d.open()"
               [(ngModel)]="selectedDate"
               (ngModelChange)="filterLogs()">
        <span class="input-group-append">
          <button type="button"
                  class="btn btn-light"
                  (click)="clearDate()">
            <i class="icon-prepend {{ icons.destroy }}"></i>
          </button>
        </span>
      </div>
    </div>

    <div class="form-group">
      <label class="col-form-label"
             i18n>Time range:</label>
      <ngb-timepicker [spinners]="false"
                      [(ngModel)]="startTime"
                      (ngModelChange)="filterLogs()"></ngb-timepicker>

      <span class="middle">&nbsp;&mdash;&nbsp;</span>

      <ngb-timepicker [spinners]="false"
                      [(ngModel)]="endTime"
                      (ngModelChange)="filterLogs()"></ngb-timepicker>
    </div>
  </div>
</ng-template>
